<template>
    <div class="root">
      <div @click="addItem('MULTIBAR')"><img :src="require('../../assets/images/multibar.png')"/></div>
      <div @click="addItem('BIBAR')"><img :src="require('../../assets/images/bibar.png')"/></div>
      <div @click="addItem('RANKINGBAR')"><img :src="require('../../assets/images/rankingbar.png')"/></div>
      <div @click="addItem('STACKBAR')" ><img :src="require('../../assets/images/stackbar.png')"/></div>
      <div @click="addItem('DTRANKINGBAR')"><img :src="require('../../assets/images/dtrankingbar.png')"/></div>
      <div @click="addItem('DTRANKINGBARGRADIENT')"><img :src="require('../../assets/images/dtrankingbarg.png')"/></div>
      <div @click="addItem('DTRANKINGBARIMAGE')"><img :src="require('../../assets/images/dtrankingbari.png')"/></div>
      <div @click="addItem('DTRANKINGBARGRADIENTIMAGE')"><img :src="require('../../assets/images/dtrankingbargi.png')"/></div>
      <div @click="addItem('BARLINE')"><img :src="require('../../assets/images/barline.png')"/></div>
      <div @click="addItem('BARZOOM')"><img :src="require('../../assets/images/barzoom.png')"/></div>
    </div>
</template>
<script>

export default {
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    addItem (itemName) {
      this.$store.commit('addItem', { itemName })
    }
  },
  mounted () {
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .root {
        padding:5px;
        display:grid;
        justify-items: center;
        align-items: center;
        background: #fff;
        grid-template-rows:repeat(5,100px);
        grid-template-columns: repeat(2,145px);
        gap: 5px;
    }
    .root div {
        width:100%;
        height:100%;
        box-sizing: border-box;
        padding:0px;
        background-color: #aaa;
        background-clip: content-box;
        box-shadow: 0px 0px 2px #888888
    }
    .root div:hover {
      outline: 1px solid red
    }
    img {
      width:100%;
      height:100%
    }
</style>
